<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
    <link href="static/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    <link href="static/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="static/js/plugins/sortable.js" type="text/javascript"></script>
    <script src="static/js/fileinput.js" type="text/javascript"></script>
    <script src="static/js/locales/fr.js" type="text/javascript"></script>
    <script src="static/js/locales/es.js" type="text/javascript"></script>
    <script src="static/themes/fas/theme.js" type="text/javascript"></script>
    <script src="static/themes/explorer-fas/theme.js" type="text/javascript"></script>
</head>
<body>
	<script type="text/javascript">
		$(function () {
		    initFileInput("uploadfile");
		})
	
		function initFileInput(ctrlName) {
		    var control = $('#' + ctrlName);
		    control.fileinput({
		        language: 'zh', //设置语言
		        uploadUrl: "${pageContext.request.contextPath }/upload", //上传的地址
		        allowedFileExtensions: ['xls','xlsx','pdf','jpg', 'gif', 'png'],//接收的文件后缀
		        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
//		        uploadAsync: true, //默认异步上传
		        uploadAsync: false, //默认异步上传
		        showUpload: true, //是否显示上传按钮
		        showRemove : true, //显示移除按钮
		        showPreview : true, //是否显示预览
		        showCaption: false,//是否显示标题
		        browseClass: "btn btn-primary", //按钮样式
		        dropZoneEnabled: true,//是否显示拖拽区域
		        enctype: 'multipart/form-data',
		        validateInitialCount:true,
		        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
		        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
	
		    })
		}
		$(".uploadfile").on('filebatchpreupload', function() { 
	    	//上传前调用        console.log('文件正在上传');
	    	alert("pre upload");
	    });
		
		// 该效果 对应同步上传有效
		$(".uploadfile").on("filebatchuploadsuccess", function (event, data, previewId, index) {  
	    	//上传后的回调，获取上传文件名字和路径
	     //   console.log(data);
	    	alert("upload after filebatchuploadsuccess");
	    });
		
		// 该效果 对应异步上传有效
		$(".uploadfile").on("fileuploaded", function (event, data, previewId, index) {  
	    	//上传后的回调，获取上传文件名字和路径
	     //   console.log(data);
	    	alert("upload after fileuploaded");
	    });
	    $(".uploadfile").on('fileerror', function(event, data, msg) {  //一个文件上传失败
		        console.log('文件上传失败！'+data.id);
	    });
		
	    /**
	    * http://plugins.krajee.com/file-input#option-initialpreviewconfig
	    */
	</script>
	
	<center>
		<div class="row form-group">
			<label class="col-md-4">附件上传:</label>
			<div class="col-sm-12">
			<input id="uploadfile" name="uploadfile" multiple="multiple" type="file"
					data-show-caption="true" class="uploadfile">
			    
					
			</div>
		</div>
	
	

	</center>
</body>
</html>